
        .mytoggle-button{ 
            display: none; }
        .button-label{
            cursor:pointer;
            position: relative;
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: #dc3545;
            box-shadow: #ccc 0px 0px 0px 2px;
            border-radius: 3px;
            overflow: hidden;
            text-align:left;
        }
        .circle{
            position: absolute;
            top: 1px;
            left: 1px;
            width: 10px;
            height: 28px;
            border-radius: 3px;
            background-color: #fff;
        }
        .button-label .text {
            line-height: 30px;
            font-size: 18px;
            text-shadow: 0 0 2px #ddd;
        }

        .on { color: #fff; display: none; text-indent: 15px;}
        .off { color: #fff; display: inline-block; text-indent: 26px;}
        .button-label .circle{
            left: 1px;
            transition: all 0.3s;
        }
        .mytoggle-button:checked + label.button-label .circle{
            left: 69px;
        }
        .mytoggle-button:checked + label.button-label .on{ display: inline-block; }
        .mytoggle-button:checked + label.button-label .off{ display: none; }
        .mytoggle-button:checked + label.button-label{
            background-color: #28A745;
        }
        .mytoggle-button:disabled + label.button-label
{
  background:gray;
}